<template>
	<div class="wrappers">
		<div class="week-top">
			<div class="desc-content">
				<span>周末出游</span>
				<p>智利推荐超完美套餐</p>
			</div>
		</div>
		<div class="week-bottom">
			<div class="swiper-item">
				<swiper :options="swiperOption">
					<swiper-slide v-for="item of weekList" :key="item.id">
						<div class="weekSwiper-item">
							<div class="weekitem-img">
								<img class="weekimg-item" :src="item.imgUrl" alt="">
							</div>
							<div class="weekitem-desc">
								{{item.desc}}
								<p>{{item.detail}}</p>
							</div>
						</div>
					</swiper-slide>
				</swiper>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "homeWeekend",
		data() {
			return {
				swiperOption: {
					freeMode:true,
					spaceBetween:15,
					slidesPerView:3
				},
				weekList: [
					{
						id: "88888",
						desc: "拈花湾",
						detail: "禅意假日 古韵风光",
						imgUrl: "https://pic5.40017.cn/02/000/33/66/rBLkCFs0Tr6AXiFPAABmgwDtp7o002_280x190_00.jpg"
					},
					{
						"id": "0002",
						"imgUrl": "https://pic5.40017.cn/01/000/00/9c/rBANC1vD9_GAb2qVAAD1zTnOfl0327_280x190_00.jpg",
						"desc": "迪士尼",
						"detail": "点亮心中奇梦"
					},
					{
						"id": "0003",
						"imgUrl": "https://pic5.40017.cn/01/001/f8/b2/rBLkBlsWe--AYOxAAABvztYw1fM559_280x190_00.jpg",
						"desc": "东方盐湖城·道天下",
						"detail": "茅山脚下的逍遥山镇"
					},
					{
						"id": "0004",
						"imgUrl": "https://pic5.40017.cn/02/000/f8/b9/rBLkCFsWfOSAKWiGAABRaPAf0aA516_280x190_00.jpg",
						"desc": "天目湖",
						"detail": " 肆意山水 古街温泉 "
					},
					{
						"id": "0005",
						"imgUrl": "https://pic5.40017.cn/01/001/f8/b2/rBLkBlsWe--AYOxAAABvztYw1fM559_280x190_00.jpg",
						"desc": "揭阳湖",
						"detail": "山水人间 肆意快活"
					},
					{
						"id": "0006",
						"imgUrl": "https://pic5.40017.cn/02/000/f8/b9/rBLkCFsWfOSAKWiGAABRaPAf0aA516_280x190_00.jpg",
						"desc": "天目湖",
						"detail": "竹海 山水 温泉 古街"
					}
				]
			}
		}

	}
</script>

<style>
	.wrappers {
		overflow: hidden;
		height: 0;
		padding-bottom: 65%;
		border-top: .2rem solid #EEEEEE;
	}

	.week-top {
		position: relative;
		text-align: center;
		overflow: hidden;
		height: 0;
		padding-bottom: 15.5%;

	}

	.desc-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.desc-content>span {
		display: inline-block;
		color: #000000;
		font-weight: bold;
		margin-bottom: .17rem;
	}

	.desc-content>p {
		color: #AAAAAA;
	}

	.week-bottom {
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 80%;
	}

	.weekSwiper-item {
		overflow: hidden;
		height: 0;
		width: 100%;
		padding-bottom: 120%;
		border: .02rem solid #CCCCCC;
		margin-left: .2rem;
	}

	.weekitem-img {
		overflow: hidden;
		height: 0;
		padding-bottom: 68%;
	}

	.weekimg-item {
		max-width: 100%;
	}

	.weekitem-desc {
		text-align: center;
		margin-top: .2rem;
		font-size: .2rem;
	}

	.weekitem-desc>p {
		margin-top: .1rem;
	}
</style>
